JavaScript 运行机制以及Event Loop(事件循环)

标签:2024-05-19 17:35:19

JavaScript执行机制通常指的是它的单线程事件循环任务队列

单线程:

JavaScript在浏览器中是单线程的,意味着同一时间只能执行一个任务,后续的任务必须排队等候。

事件循环:

JavaScript执行时,会形成一个执行栈和一个任务队列。当执行栈为空时,会从任务队列中取出任务执行。

任务队列:

任务队列通常包括宏任务和微任务。宏任务(Macro Task)如setTimeout、setInterval、I/O操作、UI渲染等;微任务(Micro Task)如Promise、MutationObserver等。

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

// 输出顺序为:script start, script end, promise, promise2, setTimeout

示例代码中,首先打印出script start和script end,然后进入事件循环。首先执行所有微任务,按照Promise的then语句顺序打印出promise和promise2,最后执行宏任务中的setTimeout,打印出setTimeout。

事件循环机制的执行流程如下:

1、初始化:当JavaScript引擎启动时,首先会创建全局执行上下文并压入调用栈。初始化任务队列,包括微任务队列和宏任务队列

2、执行同步代码:使用调用栈执行同步代码,遇到宏任务放入宏任务队列,遇到微任务放入微任务队列。

3、执行微任务:当全局上下文中的所有同步代码执行完毕后,会首先处理所有待执行的微任务

4、渲染(浏览器环境):清空微任务队列后,浏览器会尝试进行渲染操作,更新页面视图。

5、执行宏任务:渲染之后,事件循环会从宏任务队列中取出一个宏任务来执行。 每个宏任务内部也会先执行其同步代码,同样遇到宏任务放入宏任务队列,遇到微任务放入微任务队列。

6、执行微任务:如果上一步宏任务中产生微任务,微任务队列就不为空,需要处理处理所有待执行的微任务

7、渲染

8、执行宏任务

9、循环迭代:事件循环不断在宏任务队列和微任务队列之间切换,执行任务,直至两个队列都为空。 浏览器执行的时候,所有的js代码都会被解析到